<template>
  <div v-loading="loading" class="dashboard-container">
    <div class="app-container">
      <!-- 定义基础布局 -->
      <el-card class="tree-card">
        <!-- 卡片组件 -->
        <!-- 头部的内容 -->
        <tree-tools :tree-node="company" :is-root="true" @addDepts="addDepts" />
        <!-- 放置树形组件 data用来展示数据  props用来配置从哪里读取（白话：数据中的哪个属性的值作为节点显示）,default-expand-all默认展开所有节点-->
        <el-tree :data="departs" :props="defaultProps" default-expand-all>
          <!-- 传入插槽 -->
          <!-- el-tree的插槽内容 会被循环生成 有多少个节点 就会循环生成多少次 -->
          <!-- 作用域插槽 el-tree循环每一个的时候 给插槽塞入一个数据 获取到当前循环的节点数据 -->
          <!-- <template slot-scope="{ data }"> -->
          <template v-slot="{ data }">
            <!-- 不会生成实质标签 -->
            <!-- 将data传给子组件显示，子组件删除节点后通过自定义事件通知父组件重新获取数据 -->
            <tree-tools :tree-node="data" @delDepts="getDepartments" @addDepts="addDepts" @editDepts="editDepts" />
          </template>
          <!-- vue标签的运行方式 先去执行作用域插槽的赋值 然后执行props传值 -->
        </el-tree>
      </el-card>
    </div>
    <!-- 放置新增弹层组件  -->
    <add-dept ref="addDept" :show-dialog.sync="showDialog" :tree-node="node" @addDepts="getDepartments" />
  </div>
</template>

<script>
import TreeTools from './components/tree-tools.vue'
import { getDepartments } from '@/api/departments'
import { transListToTreeData } from '@/utils/index.js'
import AddDept from './components/add-dept' // 引入新增部门组件

export default {
  components: {
    TreeTools,
    AddDept
  },
  data() {
    return {
      // 组织架构的数据
      departs: [],
      defaultProps: {
        // 如果这里是空的  默认 label: 'label' children: "children"
        // （label属性的作用：白话：数据中的哪个属性的值作为节点显示）
        label: 'name'
      },

      company: {

      },
      showDialog: false, // 显示窗体
      node: null, // 用来记录当前要添加子部门的数据
      loading: false // 用来控制进度弹层的显示和隐藏
    }
  },
  created() {
    this.getDepartments() // 调用自身的方法
  },
  methods: {
    async getDepartments() {
      this.loading = true
      const result = await getDepartments()
      // 传id主要是判断他为父节点，因为pid为''时，就代表没有父亲是父节点，此时比较的就是所有父节点是否同名
      this.company = { name: result.companyName, manager: '负责人', id: '' }
      // this.departs = result.depts // 需要将其转化成树形结构
      this.departs = transListToTreeData(result.depts, '')
      this.loading = false
      // console.log(result)
    },
    addDepts(node) {
      this.showDialog = true // 显示弹层
      // 因为node是当前的点击的部门， 此时这个部门应该记录下来,
      this.node = node
      // console.log(node)
    },
    method(value) {
      this.showDialog = value
    },
    // 点击编辑触发的父组件的方法
    editDepts(node) {
      this.showDialog = true // 显示新增组件弹层
      this.node = node // 存储传递过来的node数据
      // 我们需要在这个位置 调用子组件的方法
      // 父组件 调用子组件的方法
      this.$refs.addDept.getDepartDetail(node.id) // 直接调用子组件中的方法 传入一个id
    }
  }

}
</script>

<style scoped>
 .tree-card {
  padding: 30px  140px;
  font-size:14px;
 }
</style>
